﻿@model Article
@{
    ViewData["Title"] = "Edit";
}
@section PYhead{
    <link href="~/css/Article.css" type="text/css" rel="stylesheet">
    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <style>
        #editor {
            min-height: 700px;
            width: 800px;
            margin-left: calc(50% - 400px);
            background-color:white;
        }

            #editor:focus {
                border: 1px solid rgba(0, 217, 255, 0.767);
            }

        .standardpic {
            max-width: 400px;
        }

        .ar-inp {
            height: 30px;
            width: 800px;
            margin-left: calc(50% - 400px);
            text-align: center;
            padding: 5px;
            outline: none;
            border: 1px solid rgba(128, 128, 128, 0.438);
            margin-bottom: 20px;
        }

            .ar-inp:focus {
                border: 1px solid rgba(0, 217, 255, 0.767);
            }

        .ar-sub {
            margin-top: 25px;
            height: 30px;
            width: 800px;
            margin-left: calc(50% - 400px);
            text-align: center;
            padding: 5px;
            outline: none;
            border: 1px solid rgba(128, 128, 128, 0.438);
            margin-bottom: 20px;
            background-color: rgba(0, 204, 255, 0.438);
            line-height: 15px;
        }
    </style>
}
<div id="topbar-ar">
    <p class="artop-item" style="right:0;left:0;">发布文章</p>
</div>
<form id="forma" asp-for="ArticleCreate" asp-controller="AcMana" method="post">
    <input asp-for="Title" class="ar-inp form-control" placeholder="请输入标题" type="text">
    <input asp-for="Introduce" class="ar-inp form-control" placeholder="请输入简介" type="text">
    <input asp-for="ArticlePicture" class="ar-inp form-control" value="/PIC/NOEPIC.svg" type="text">
    <div id="editparent">
        <!-- 编辑器控制按钮 -->
        <div id='editControls' style='text-align:center; padding:5px;'>
            <div class='btn-group'>
                <a class='btn' data-role='bold' href='#'><b>Bold</b></a>
                <a class='btn' data-role='italic' href='#'><em>Italic</em></a>
                <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
                <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
            </div>
        </div>
        <!-- 编辑器可输入内容处 -->
        <div id='editor' style="min-height: 700px; height:auto;" class='form-control' contenteditable>
        </div>
        <input type="hidden" asp-for="Content" id="realeditor" value="" />
    </div>
    <input type="button" onclick="sbm()" class="form-control" style="width:800px; margin-left:calc(50% - 400px);" name="submiter" value="创建">
    <div asp-validation-summary="All"></div>
</form>
<script>

    $(function () {
        $('#editControls a').click(function (e) {
            document.execCommand($(this).data('role'), false, null);
        })
    });

    function sbm() {
        var s = document.getElementById("editor").innerHTML;
        s = s.replace(/<b>/g, "[b]");
        s = s.replace(/<\/b>/g, "[/b]");
        s = s.replace(/<i>/g, "[i]");
        s = s.replace(/<\/i>/g, "[/i]");
        s = s.replace(/<strike>/g, "[strike]");
        s = s.replace(/<\/strike>/g, "[/strike]");
        s = s.replace(/<u>/g, "[u]");
        s = s.replace(/<\/u>/g, "[/u]");
        s = s.replace(/<div>/g, "[div]");
        s = s.replace(/<\/div>/g, "[/div]");
        s = s.replace(/<br>/g, "[br]");
        s = s.replace(/<\/br>/g, "[/br]");
        s = s.replace(/&nbsp;/g, "[space]");
        document.getElementById("realeditor").value = s;
        document.getElementById("forma").submit();
    }
</script>